<template>
	<view class="loginWrap" :style="{'background-color':pageBg}" style="float: left;width: 100%;height: 100%;">
		<!-- <view style="float: left;width: 100%;">eee{{infotest}}</view> -->
		<view class="_top_text">
			<view
				class="top_max_box user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center ">
				<view class="tn-shadow-blur"
					style="background-image:url('/static/logo.png');width: 120rpx;height: 120rpx;background-size: cover;border-radius:20%;">
				</view>
				<view class="user-info__nick-name-bottom" style="margin-top: 20px;">记录美好生活</view>
			</view>
		</view>
		<!-- <view :class="plat == 2?'_mid_text_ios':'_mid_text'">
			<view v-if="plat == 2"> -->
		<view >
			<view >
				<view class="uni-form-item_other uni-column" style="font-size: 24px;font-weight: bold;" >
					登录/注册
				</view>
				<view class="uni-form-item_other uni-column" >
					<input class="uni-form-item_other_input" placeholder="请输入邮箱" type="text" v-model="form.phone"
						placeholder-class="pwd" name="phone" />
				</view>
				<view  class="uni-form-item_other uni-column " style="position: relative;">
					<input class="uni-form-item_other_input" v-if="pwdType == 'password'" type="password"
						placeholder="请输入密码" autocomplete="off" placeholder-class="pwd" v-model="form.password"
						name="password" />
					<input class="uni-form-item_other_input" v-if="pwdType == 'text'" type="text" placeholder="请输入6-13位数字和字母组合密码"
						autocomplete="off" placeholder-class="pwd" v-model="form.password" name="password" />
						<!-- 请输入6-13位数字和字母组合密码 -->
					<image style="height:36rpx;width:36rpx;position: absolute;right: 10rpx;top:22rpx;" @click="changeType()"
						:src="seen?openeye:nopeneye" mode="widthFix" />
				</view>
				<view  style="float: left;width: 100%;z-index: 99999;margin-bottom: 10px;">
					<!-- <view style="float: right;margin-right:60rpx;"><text @click="register()">立即注册</text>
					</view> -->
					<view style="float: left;margin-left:60rpx;" @click="forgetpwd()">忘记密码</view>
				</view>
				<button class="loginbtn" @click="submit()">登录</button>
			</view>
			
			<!-- 安卓或者小程序 -->
			<!-- <button class="loginbtn" @click="login_weixin()" v-if="plat == 1 || plat == 0">微信登录</button> -->
			<view class="uni-form-item_bottom uni-column  css-theme" :class="[cueTheme]"
				:style="{'background-color':pageBg}">
				<radio style="transform:scale(0.7)" :checked="checkRedio" @click="checkThis"></radio>
				<text>阅读并同意<text @click="agreement(1)">《用户协议》</text>与<text @click="agreement(2)">《隐私政策》</text></text>

			</view>
		</view>

		<!-- 其他登录方式 -->
		<view class=" tn-flex tn-flex-col-center tn-flex-row-center" v-if="plat == 1 || plat == 2">
			<!-- 安卓 或者 苹果安装了qq -->
			<view v-if="qqStatus == 1" class="tn-padding-sm tn-margin-xs" @click="login_qq()">
				<view
					class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
					<view class="tn-icon-qq"></view>
				</view>
			</view>
			<!-- 是苹果并且安装了微信 -->
			<view class="tn-padding-sm tn-margin-xs" @click="login_weixin()" v-if="wxStatus == 1">
				<view
					class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
					<view class="tn-icon-wechat-fill"></view>
				</view>
			</view>
		</view>


		<tn-popup v-model="show_popup_center" :closeBtn="false" mode="center" width="550rpx" :borderRadius="20"
			:zIndex="10" :maskCloseable="false" :backgroundColor="pageBg">
			<view class="container">
				<view class="row">
					<view style="width: 100%;text-align: center;font-size: 18px;line-height: 24px;font-weight: bolder;">
						用户协议与隐私条款</view>
					<view style="width: 100%;line-height: 24px;margin-top: 10px;">
						欢迎您使用拾光记！<br />
						请仔细阅读<text style="color: #18B998;" @click="agreement(1)">《用户协议》</text>与<text
							style="color: #18B998;" @click="agreement(2)">《隐私政策》</text>
						我们将按照您同意的条款使用您的个人信息。
						<text>
							如您同意此政策，请点击“同意”并开始使用我们的产品和服务，我们尽全力保护您的个人信息安全。
						</text>
					</view>
					<view class="category-item">
						<view class="save_btn" style="background-color: #ccc;" @click="goExit()">不同意</view>
						<view class="save_btn" style="margin-left: 30rpx;" @click="goSuccess()">同意</view>
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				show_popup_center: false,
				form: {
					phone: '',
					password: '',
					lx: ''
				},
				value: '',
				pwdType: 'password', // 密码类型
				openeye: ('/static/images/show.png'), //图片地址
				nopeneye: ('/static/images/eye_shutdown.png'), //图片地址
				seen: 'nopeneye',
				kf_phone: '',
				ICP: '',
				company_name: '',
				isShow: 1,
				forgetPwd: 0,
				checkRedio: false,
				plat: 1, //1  app  0 小程序
				wxStatus:0,
				qqStatus:0,
			}
		},
		onLoad(options) {
			_self = this
			_self.lx = options.lx
			const systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'android' || systemInfo.platform === 'ios') {
				if(systemInfo.platform === 'android'){
					this.plat = 1
				}else{
					this.plat = 2
				}
				
			} else {
				this.plat = 0
			}
			
			this.checkQqApp()
			this.checkWxchatApp()
		},
		onShow() {
			console.log("=============login============")
			// uni.getStorage({
			// 	key: 'user',
			// 	success: function(res) {
			// 		console.log(res)
			// 		if (res.data) {
			// 			console.log(res.data)
			// 			uni.switchTab({
			// 				url: '/pages/index/index',
			// 			});

			// 		}
			// 	},
			// 	fail: function(e) {
			// 		console.log(e)
			// 	}
			// })
		},
		methods: {
			goExit() {
				if (uni.getSystemInfoSync().platform === 'ios') {
					plus.runtime.launchApplication({
						action: 'QUIT'
					});
				} else {
					plus.runtime.quit();
				}
			},
			goSuccess() {
				this.show_popup_center = false
			},
			//QQ登录
			login_qq() {
				if (!_self.checkRedio) {
					uni.showToast({
						title: '请勾选登录协议',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				let _this = this;
				uni.login({
					// onlyAuthorize: true,
					provider: 'qq',
					success: function(loginRes) {
						uni.showLoading({
							title: '登录中...'
						});
						// 获取用户信息
						uni.getUserInfo({
							provider: 'qq',
							success: function(infoRes) {
								_this.other_login(loginRes, infoRes, 'qq')
							},
							fail: function(err) {
								uni.hideLoading();
							}
						});
					},
					fail: function(err) {
						// 登录授权失败

					}
				});
			},
			//微信登录
			login_weixin() {
				if (!_self.checkRedio) {
					uni.showToast({
						title: '请勾选登录协议',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				let _this = this;
				uni.login({
					// onlyAuthorize: true,
					provider: 'weixin',
					success: function(loginRes) {
						uni.showLoading({
							title: '登录中...'
						});
						

						if (_self.plat == 1 || _self.plat == 2) { // Android平台的代码
							// 获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									console.log(infoRes)
									_this.other_login(loginRes, infoRes, 'wx');
								},
								fail: function(err) {
									uni.hideLoading();
								}
							});
						} else { // 小程序平台的代码
							uni.request({
								url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxfc8cc20518d8b415&secret=39ed9af0e35b8079da7454084102bf5d&js_code=' +
									loginRes.code +
									'&grant_type=authorization_code',
								method: 'GET',
								header: {
									'content-type': 'application/json'
								},
								success(res) {
									var resData = res.data;
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log(infoRes)
											_this.other_login(resData, infoRes, 'wxxcx');
										},
										fail: function(err) {
											uni.hideLoading();
										}
									});
								},
								fail: (res) => {

								}
							})
							
							
						}


					},
					fail: function(err) {
						// 登录授权失败   
					}
				});
			},
			//授权登录
			other_login(loginRes, infoRes, type) {
				let _this = this;
				let url;
				let pram = {};
				// _this.loginRes=JSON.stringify(loginRes).toString();
				// _this.infoRes=JSON.stringify(infoRes).toString();
				
				switch (type) {
					case 'qq':
						url = '/token/sys/login-qq';
						pram = {
							'openId': loginRes.authResult.openid,
							'name': infoRes.userInfo.nickname,
							'sex': infoRes.userInfo.gender == '男' ? 0 : 1,
							//'province': infoRes.userInfo.province,
							//'city': infoRes.userInfo.city,
							'avatar': infoRes.userInfo.figureurl_qq,
							'unionId': infoRes.userInfo.unionid
						}
						break;
					case 'wx':
						url = '/token/sys/login-wechat';
						pram = {
							'openId': loginRes.authResult.openid,
							'name': infoRes.userInfo.nickName,
							'sex': infoRes.userInfo.gender == '男' ? 0 : 1,
							// 'province': infoRes.userInfo.province,
							// 'city': infoRes.userInfo.city,
							// 'country': infoRes.userInfo.country,
							'avatar': infoRes.userInfo.avatarUrl,
							'unionId': loginRes.authResult.unionid
						}
						break;
					case 'wxxcx':
						url = '/token/sys/login-wechat';
						pram = {
							'openId': loginRes.openid,
							'name': infoRes.userInfo.nickName,
							'sex': infoRes.userInfo.gender == '男' ? 0 : 1,
							// 'province': infoRes.userInfo.province,
							// 'city': infoRes.userInfo.city,
							// 'country': infoRes.userInfo.country,
							'avatar': infoRes.userInfo.avatarUrl,
							'unionId': loginRes.unionid
						}
						break;
					default:
				}
				uni.request({
					url: getApp().globalData.url + 'modules/serviceUser/wxLogin',
					data: pram,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success(res) {
						var resData = res.data;
						if (resData.code == "200") {
							uni.hideLoading();
							resData.data.name = decodeURIComponent(resData.data.name)
							// var data = {
							// 	"id": resData.data.id,
							// 	// "name": resData.data.name,
							// 	// "avatar": resData.data.avatar,
							// 	"openId": resData.data.openId,
							// 	"unionId": resData.data.unionId,
							// 	"accessToken": resData.data.accessToken,
							// 	"member": resData.data.member,
							// }
							console.log(resData.data)
							// console.log(data)
							uni.setStorage({
								key: 'user',
								data: resData.data,
								success: function() {
									uni.switchTab({
										url: '/pages/index/index',
									});

								}
							});



						} else {
							uni.hideLoading();
							//消息提示框
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: "none"
							});
							return false;
						}
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							duration: 2000,
							icon: "none"
						});
					}
				})
				// this.$api.wxLogin(pram).then((res) => {
				// 	var resData = res;
				// 	if (resData.code == "200") {

				// 		uni.setStorage({
				// 			key: 'user',
				// 			data: resData.data,
				// 			success: function() {}
				// 		});

				// 		uni.switchTab({
				// 			url: '/pages/index/index',
				// 		});


				// 	}
				// })




			},

			agreement(type) {
				uni.navigateTo({
					url: '/pages/me/agreement?type=' + type
				});
			},
			checkThis() {
				if (this.checkRedio) {
					this.checkRedio = false
				} else {
					this.checkRedio = true
				}
			},
			getCode() {

				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				//手机验证
				if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
					uni.showToast({
						title: "手机号码不正确",
						icon: 'none'
					});
					return false;
				}

				var uri = getApp().globalData.url + 'modules/serviceUser/getCode';
				var formData = {
					phone: this.form.phone
				};
				uni.request({
					url: uri,
					data: formData,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						var resData = res.data;
						if (resData.code == "200") {
							uni.navigateTo({
								url: '../login/loginMessage?phone=' + _self.form.phone + '&lx=' + _self
									.lx + '&forgetPwd=' + _self.forgetPwd
							});
						}
					},
					fail: (res) => {

					}
				})

			},

			changeType() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
				this.seen = !this.seen; //小眼睛的变化
			},
			showThis(type) {
				if (type == 3) {
					this.forgetPwd = 1
					this.isShow = 2;
				} else {
					this.isShow = type;
				}

			},
			forgetpwd() {
				uni.navigateTo({
					url: '/pages/login/forgetpwd'
				});
			},

			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			submit(){
				var _this = this
				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入邮箱',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.form.phone))) {
					uni.showToast({
						title: "邮箱格式不正确",
						icon: 'none'
					});
					return false;
				}
				if (this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				
				//密码验证// 密码格式为6-13位，必须有大小写字母和数字组成 
				var pwd = this.form.password;
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,13}$/;

				if (!reg.test(pwd) || pwd.length < 6 || pwd.length > 13) {
					uni.showToast({
						title: "密码格式不正确",
						icon: 'none'
					});
					return false;
				}


				if (!_self.checkRedio) {
					uni.showToast({
						title: '请勾选登录协议',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				var formData = {
					mail: this.form.phone,
					password: this.form.password
				};
				console.log(formData)
				//使用全局变量中的url
				var uri = getApp().globalData.url + 'modules/serviceUser/loginMail';
				
				
				uni.request({
					url: uri,
					data: formData,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						console.log(res)
						var resData = res.data;
						if (resData.code == "200") {
							uni.setStorage({
								key: 'user',
								data: resData.data,
								success: function() {}
							});
							
												
							uni.switchTab({
								url: '/pages/index/index',
							});
						}else{
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: (res) => {
				
					}
				})
				// this.$api.login(formData).then((res) => {
				// 	var resData = res;
				// 	console.log(resData)
				// 	if (resData.code == "200") {
				// 		/* 
				// 		 本地数据缓存，缓存用户登录信息
				// 		 */
				// 		uni.setStorage({
				// 			key: 'user',
				// 			data: resData.data,
				// 			success: function() {}
				// 		});

					
				// 		uni.switchTab({
				// 			url: '/pages/index/index',
				// 		});


				// 	}
				// })

			},
			updateCid(cid, id) {

				// var data = {
				// 	id: id,
				// 	cid: cid,
				// }
				// this.$api.updateUser(data).then((res) => {
				// 	console.log(res);
				// })

			},
			
			
			// 判断第三方程序(微信) 是否安装
			checkWxchatApp(){
			    if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
			        console.log("微信应用已安装");
					this.wxStatus = 1
			    }else{
			        console.log("微信应用未安装");
					this.wxStatus = 0
			    }
			},
			// 判断第三方程序(微信) 是否安装
			checkQqApp(){
			    if(plus.runtime.isApplicationExist({pname:'com.tencent.mobileqq',action:'mqq://'})){
			        console.log("qq应用已安装");
					this.qqStatus = 1
			    }else{
			        console.log("qq应用未安装");
					this.qqStatus = 0
			    }
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.pwd {
		border: none;
	}

	._top_text {
		font-size: 16px;
		font-weight: bold;
		padding-top: 15vh;
		// margin-left: 40rpx;
		margin-bottom: 50rpx;
		// letter-spacing: 5rpx;
	}

	._mid_text {

		padding-top: 15vh;
		margin-bottom: 50rpx;

	}
	._mid_text_ios{
		padding-top: 5vh;
		margin-bottom: 50rpx;
	}

	.uni-form-item_other {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 50rpx;
	}

	.uni-form-item_other input {
		flex: 1;
		border: none;
		height: 80rpx;
		font-size: 17px;
		font-weight: bold;
		background-color: none;
		border-bottom: 1px solid #f1f1f1;
	}

	.uni-form-item_other_input {
		flex: 1;
		width: 80%;
		border: none;
		height: 80rpx;
		font-size: 17px;
		font-weight: bold;
		background-color: none;
		border-bottom: 1px solid #f1f1f1;
		background-color: #f1f1f1;
		padding: 0px 5px;
	}

	.uni-form-item_bottom {

		align-items: center;
		justify-content: space-between;
		padding: 0upx 0upx 5upx 30upx;
		margin: 5upx;
		font-size: 13px;
		text-align: left;

	}

	.loginbtn {
		margin: 50rpx;
		margin-top: 25upx;
		background: #18B998;
		// background: #07C160;
		color: #fff;
		border-radius: 30px;
		font-size: 16px;
		height: 88rpx;
		line-height: 88rpx;

	}


	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 内容 start */
		&__wrapper {
			padding-top: 400rpx;
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			background-color: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(6rpx);
			-webkit-backdrop-filter: blur(6rpx);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				// color: #FFFFFF;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					// color: #FFFFFF;
				}
			}

			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}

		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			padding-bottom: 0;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(6rpx);
			-webkit-backdrop-filter: blur(6rpx);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border: 1rpx solid #FFFFFF;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #FFFFFF;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 24rpx;
							color: #FFFFFF;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #FFFFFF;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 100rpx;
					// color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__tips {
					margin: 30rpx 0;
					// color: #FFFFFF;
				}
			}
		}

		/* 登录注册信息 end */

		/* 登录方式切换 start */
		&__way {
			margin: 0 auto;
			margin-top: 110rpx;

			&__item {
				&--icon {
					width: 77rpx;
					height: 77rpx;
					font-size: 50rpx;
					border-radius: 100rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
					}
				}
			}
		}

		/* 登录方式切换 end */
		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 24rpx;
		// color: #E6E6E6;
	}

	.container {
		padding: 20px;
	}

	.category-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;

	}

	.save_btn {
		text-align: right;
		background-color: #18B998;
		color: white;
		width: 90px;
		border-radius: 30px;
		border: none;
		text-align: center;
		height: 36px;
		line-height: 36px;
	}
</style>